<template>
    <div class="drawer-modular maxbox">
        <el-drawer title="标题" :visible.sync="drawerVisible" :with-header="false" :size="size" :before-close="close"
            :modal="true" :wrapper-closable="true" v-loading="loading">
            <div class="drawer-title">{{ drawerTitle }}</div>
            <div class="drawer-content">
                <el-scrollbar wrap-class="scrollbar-wrapper">
                    <el-form ref="ruleForm" :model="item" :rules="serviceValidation" label-width="80px"
                        label-position="top">
                        <div class="titleBox">
                            <div class="title_span" />
                            <div class="title_name">基础信息</div>
                        </div>
                        <el-row :gutter="18" class="mb8">
                            <el-col :span="9">
                                <el-form-item label="房屋标题" prop="title">
                                    <el-input v-model="item.title" placeholder="请输入房屋标题" size="small" clearable
                                        show-word-limit :disabled="true" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="9">
                                <el-form-item label="房屋副标题" prop="sideTitle">
                                    <el-input v-model="item.sideTitle" placeholder="请输入房屋副标题" size="small" clearable
                                        show-word-limit :disabled="true" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="18" class="mb8">
                            <el-col :span="18">
                                <el-form-item label="视频" prop="mediaFile">
                                    <MediaUpload v-model="item.mediaFile" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="18" class="mb8">
                            <el-col :span="18">
                                <el-form-item label="图集" prop="images">
                                    <ImageUploadNew v-model="item.images" :limit="36" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-scrollbar>
            </div>
            <div v-loading="!requestStatus" class="drawer-btn">
                <el-button @click="close()">取消</el-button>
                <el-button type="primary" @click="submit()">提交</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { cardInfoValidation } from "./inputValidation";
import ImageUploadNew from '@/components/ImageUploadNew';
import { getGoods, addGoods, updateGoods } from "@/api/mall/goods";
import ImageUpload from '@/components/ImageUpload';
import MediaUpload from '@/components/MediaUpload'
export default {
    components: {
        MediaUpload, ImageUploadNew, ImageUpload,
    },
    props: {
        // 窗口宽度
        size: {
            type: String,
            default: "calc(100vw - 200px)",
        },
    },
    dicts: [], // 字典
    data() {
        return {
            loading: false, // 加载
            serviceValidation: cardInfoValidation, // 表单校验
            drawerVisible: false, // 窗口显示状态
            drawerTitle: "", // 窗口标题
            item: {},
            requestStatus: true, // 提交状态
            disabled: true,
            //来源名称
            sourceName: null,
        };
    },

    created() { },

    methods: {
        /** 新增-显示 */
        iShow(row) {
            if (row) {
                this.loading = true;
                this.item = row;
                this.getInfo();
                this.drawerTitle = "配置图片/视频";
            } else {
                this.drawerTitle = "添加房源信息";
            }
            this.drawerVisible = true;
        },

        /**
         * 获取详情
         */
        getInfo() {
            getGoods(this.item.id).then(res => {
                this.item = res.data;
                this.loading = false;
                console.log("item", this.item)
            })
        },


        /** 新增/修改 */
        submit() {
            if (this.requestStatus) {
                this.requestStatus = false;
                if (!this.item.id) {
                    this.request(addGoods, "新增");
                } else {
                    this.request(updateGoods, "修改");
                }
            }
        },


        /** 提交请求 */
        request(mothod, str) {
            console.log("提交的数据", this.item);
            if (!mothod) return false;
            this.$refs["ruleForm"].validate((valid) => {
                if (valid) {
                    mothod(this.item)
                        .then((res) => {
                            this.requestStatus = true;
                            if (res.code == 200) {
                                this.$message.success(`${str}成功！`);
                                this.$emit("init");
                                this.close();
                            }
                        })
                        .catch((error) => {
                            this.requestStatus = true;
                        });
                } else {
                    this.requestStatus = true;
                    this.moveToErr();
                }
            });
        },

        /** 自动定位到表单报错项 */
        moveToErr() {
            this.$nextTick(() => {
                const isError = document.getElementsByClassName("is-error");
                if (isError.length) {
                    isError[0].scrollIntoView({
                        block: "nearest",
                        behavior: "smooth",
                    });
                }
            });
        },

        /** 关闭抽屉触发 */
        close() {
            this.drawerVisible = false;
            this.disabled = true;
            this.$refs["ruleForm"].resetFields();
            this.emptyData();
        },



        /** 清空数据源 */
        emptyData() {
            this.item = {
                id: null,
                deptId: null,
                name: null,
                address: null,
                lat: null,
                lng: null,
                phone: null,
                attrIds: null,
                landmarkIds: null,
                imgs: null,
                status: "0",
                introduce: null,
                delFlag: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null
            };
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/drawerModules.scss";

.titleBox {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .title_span {
        width: 5px;
        height: 18px;
        margin-right: 10px;
        background-color: #4979ff;
    }

    .title_name {
        font-size: 18px;
        font-weight: bold;
    }
}

.guige {
    margin-top: 10px;
    border-radius: 4px;
}
</style>

<style lang="scss">
.el-drawer__body {
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 110px);
}
</style>